<template>
  <div class="cart">
    <!-- 购物车有商品时显示商品列表 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-if="cartItems.length > 0">
      <van-notice-bar
        color="#1989fa"
        background="#ecf9ff"
        left-icon="info-o"
        v-if="isRollbackVisible"
      >
        <span>已成功删除，可</span>
        <a @click="rollback">点此撤回</a>
      </van-notice-bar>
      <div class="cart-items">
        <van-swipe-cell v-for="item in cartItems" :key="item.id">
          <!-- 商品信息卡 -->
          <van-card
            :num="item.count"
            :price="item.price"
            :title="item.title"
            :thumb="item.cover"
            @click-thumb="showGoodDetail(item.id)"
          >
            <template #footer>
              <van-stepper
                :value="item.count"
                async-change
                @minus="minus(item.id)"
                @plus="plus(item.id)"
                @change="onCountChange(item.id, $event)"
                min="1"
                max="99"
              />
            </template>
          </van-card>
          <!-- 右滑菜单 -->
          <template slot="right">
            <van-button square type="danger" text="删除" @click="remove(item.id)" />
          </template>
        </van-swipe-cell>
      </div>
    </van-pull-refresh>
    <!-- 购物车为空时显示空空如也 -->
    <div v-else class="cart-empty">
      <div class="img-cart-empty">
        <!-- <img src="" alt=""> -->
      </div>
      <h3>购物车空空如也</h3>
      <van-button type="info" @click="$router.push('/goods/list')">去逛逛</van-button>
    </div>
    <!-- 底部提交栏 -->
    <van-submit-bar
      class="bar-commit"
      :price="cartSubtotal"
      button-text="提交订单"
      :loading="isSubmitting"
      @submit="onSubmit"
    />
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      isLoading: false,
      isSubmitting: false,
      isRollbackVisible: false
    };
  },
  computed: {
    ...mapState(["cartItems"]),
    ...mapGetters(["cartSubtotal"])
  },
  methods: {
    ...mapMutations([
      "plusCartItemCount",
      "minusCartItemCount",
      "changeCartItemCount",
      "removeCartItem",
      "refreshCartItem",
      "rollbackRemove"
    ]),
    plus(id) {
      this.asyncData(this.plusCartItemCount, id);
    },
    minus(id) {
      this.asyncData(this.minusCartItemCount, id);
    },
    onCountChange(id, event) {
      this.asyncData(this.changeCartItemCount, id, event);
    },
    remove(id) {
      this.$dialog
        .confirm({
          message: "确定删除吗？"
        })
        .then(() => {
          this.removeCartItem(id);
          this.isRollbackVisible = true;
        });
    },
    onRefresh() {
      setTimeout(() => {
        this.refreshCartItem();
        this.isLoading = false;
      }, 500);
      console.log(this.cartItems);
    },
    asyncData(func, ...args) {
      this.$toast.loading({ forbidClick: true });
      setTimeout(() => {
        this.$toast.clear();
        // 注意此时修改 value 后会再次触发 change 事件
        func(args);
      }, 500);
    },
    onSubmit() {
      this.isSubmitting = true;
      setTimeout(() => {
        this.isSubmitting = false;
      }, 1500);
    },
    showGoodDetail(id) {
      this.$router.push({
        path: "/goods/detail",
        query: {
          goodId: id
        }
      });
    },
    rollback() {
      this.isRollbackVisible = false;
      this.rollbackRemove();
    }
  }
};
</script>
<style scoped>
.cart {
  overflow-y: auto;
  margin-bottom: 50px;
}

.bar-commit {
  bottom: 50px;
}

.van-card__price {
  color: red;
}

.van-card__footer {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.van-card__footer button {
  font-size: 24px !important;
  font-weight: 700;
}

.input-count {
  display: inline-block;
  margin: 0 5px;
  font-size: 16px;
  width: 50px;
  height: 20px;
}

.cart-empty {
  text-align: center;
  font-size: 16px;
  color: #ccc;
}

.img-cart-empty {
  margin: 10px auto;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: skyblue;
}
.van-swipe-cell__right button {
  height: 100%;
}

.van-notice-bar a {
  color: #d00;
}
</style>